'''
1、web前端三大核心技术：
      ① html：负责网页的架构  -模板文件          WXML - 借鉴web页面构成微信官方自己来发的一套专门针对微信小程序等产品应用的前端语言
      ② css：网页的样式、美化 - 样式文件         WXSS - 小程序项目页面的样式文件
      ③ js：网页的行为       - 逻辑处理文件      JS   - 处理逻辑（动态交互）
2、重点：
     ① 页面的内容必须在body内编写
     ② html为根标签，所有的标签必须在根标签中
     ③ head标签为头部标签，一般放title和搜索相关信息
3、注释：国际通用快捷键-  ctrl+/
       测试点：前端页面注释，上线（项目发布）之前，必须检查或删除     ================================1
4、常用标签：
     ① 标题标签 - h1
           <body>
             <h1>标题</h1>    -- h1...h6（h1最大）
           </body>

        或：
          <style type="text/css">
              {font-size:200px;}
          </style>
     ② 段落标签 - p            -- 独占一行、做换行使用、语义化（给浏览器看）
           <head>
              <style>
                 p {background:pink;}
              </style>
           </head>
           <body>
             <p>段落</p>
           </body>

     ③ 超链接标签 - <a href=""></a>
           <body>
               <a href="http://www.baidu.com" target="_blank">点我去百度</a>
               <a href="baidu.html">去百度</a>
           </body>

     ④ 图片标签 - <img src="" title="" alt="" width="" height="">
           title：图片加载，鼠标悬停显示信息，未加载，显示信息（优先级低于alt）
           alt：图片未加载，显示信息
           相对路径（重点）：相对当前执行文件所在位置来说
                同级：./
                上级：../

           <body>
               <img src="./tree1.jpg" alt="图片加载不出时显示" title="图片名称：树" width="200px" height="200px">
               <img src="../img/tree1.jpg" alt="图片加载不出时显示" title="图片名称：树" width="200px" height="200px">
           </body>
              测试点：图片必须有title属性  =====================================================2

     ⑤ 换行和空格 <br> &nbsp;
           换行：<br>
           空格：&nbsp;

           <body>
               你好黑<br>&nbsp;&nbsp;&nbsp;马
               你好黑<br />&nbsp;&nbsp;&nbsp;马
           </body>

     ⑥ 布局标签
           div：大盒子，独占一行
           span：小盒子，一行放多个

           <body>
               <div>我是div1</div>
               <br>
               <div>我是div2 <span style="color: brown;">我是div3</span> <span>我是div4</span></div>
           </body>

     ⑦ 表单标签
               select-option：下拉框
               textarea:     cols-宽度，rows-高度

               input：变形金刚，type属性值不同
                   text：    文本框
                   password：密码框
                   radio：   单选框
                       如何做到单选效果：相同一组才能单选，相同的name属性值为一组
                   checkbox：多选框
                   button：  普通按钮
                   submit：  提交按钮
                   resit：   重置按钮

               form：提交页面数据
                    action：将数据提交到哪个页面
                    method：
                        get：
                            1、参数在url中显示
                            2、速度比post快些
                            3、提交内容长度有限制
                        post：
                            1、参数不在url中显示
                            2、速度比post慢
                            3、提交内容长度无限制
                        场景：
                            1、get：查询使用
                            2、post：提交数据使用（登录、注册）


               <form action="提交页面.html" method="get">
                   <body>
                        用户名：
                        <input type="text" name="username">
                        <br>
                        密码：
                        <input type="password" name="password">
                        <br>
                        性别：
                        <input type="radio" name="1">男
                        <input type="radio" name="1">女
                        <br>
                        <input type="checkbox">西瓜
                        <input type="checkbox">香蕉
                        <input type="checkbox">榴莲
                        <br>
                        <input type="button" value="点我试试">
                        <input type="submit" value="点我提交">
                   </body>

                   <body>
                     来自：
                     <select>
                        <option>北京</option>
                        <option>上海</option>
                     </select>
                     <br>
                     意见：
                     <textarea cols="10" rows="20"></textarea>
                   </body>
               </form>
     ⑧ 列表标签
         有序：ol-li
         无序：ul-li

     ⑨ 常见标签
          1、<script>js语句</script>
          2、<style>css样式</style>
          3、<link src="http://www.xxx.xx/css">
'''